<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <title th:text="#{screen.consent.title}"></title>

    <link rel="stylesheet" th:href="@{#{webjars.datatables.bootstrapmin.css}}"/>
    <script th:src="@{#{webjars.datatables.jquery.datatablesmin.js}}"></script>
    <script th:src="@{#{webjars.datatables.datatables.bootstrapmin.js}}"></script>

    <link rel="stylesheet" th:href="@{#{webjars.bootstrap-selectmin.css}}">
    <script th:src="@{#{webjars.bootstrap-selectmin.js}}"></script>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var data = {
            attributes: /*[[${attributes}]]*/
        };
        /*]]>*/
    </script>
    <script type="text/javascript" th:inline="javascript">

        function jqueryReady() {
            head.load(
                /*[[@{/js/consent.js}]]*/
            );
        }
    </script>
</head>

<body id="cas">
<div layout:fragment="content">

    <form method="post" id="fm1">
        <div class="alert alert-info">
            <h1 th:text="#{screen.consent.title}"></h1>


            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#attributesPanel">Attributes</a></li>
                <li><a data-toggle="tab" href="#optionsPanel">Options</a></li>
            </ul>

            <div class="tab-content clearfix">
                <div class="tab-pane active" id="attributesPanel">
                    <br/>
                    <p>The following attributes will be released to <strong>[<span th:text="${service.id}"/>]</strong>:</p>
                    <table id="attributesTable" class="display table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>Attribute</th>
                            <th>Value(s)</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div id="optionsPanel" class="tab-pane">

                    <div class="panel panel-primary">

                        <div class="panel-heading">How should I be prompted for consent again?</div>
                        <div class="panel-body">
                            <div class="radio">
                                <label><input type="radio" name="option" value="0" th:checked="${option == 0}" onclick="optionSelected()">
                                    <strong>Every Time</strong></label>
                                <span class="help-block">Show the consent screen every time I attempt to log into <span th:text="${service.id}"/></span>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="option" value="1" th:checked="${option == 1}" onclick="optionSelected()">
                                    <strong>Attribute Name</strong></label>
                                <span class="help-block">
                            Show the consent screen, if an attribute is added or removed from the collection of attributes released
                            to <span th:text="${service.id}"/>.
                        </span>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="option" value="2" th:checked="${option == 2}" onclick="optionSelected()">
                                    <strong>Attribute Value</strong></label>
                                <span class="help-block">
                             Show the consent screen, if:
                            <ul>
                                <li>A new attribute is authorized for release to <span th:text="${service.id}"/>.</li>
                                <li>An attribute is removed from the attribute bundle previously released to <span th:text="${service.id}"/>.</li>
                                <li>The value of an attribute authorized for release to <span th:text="${service.id}"/> has changed.</li>
                            </ul>
                        </span>
                            </div>
                        </div>
                    </div>

                    <div id="reminderPanel" class="panel panel-primary">
                        <div class="panel-heading">How often should I be reminded to consent again?</div>
                        <div class="panel-body">
                            <span>
                                Show the consent screen, as a reminder, in that event that there is no change to the collection of attributes
                                released to <span th:text="${service.id}"/>  <p/>
                            </span>
                            <table>
                                <tr>
                                    <td>
                                        <input name="reminder" id="reminder"
                                               class="form-control" type="number" th:value="${reminder}">
                                    </td>
                                    <td>
                                        <select name="reminderTimeUnit" id="reminderTimeUnit" class="selectpicker">
                                            <option value="seconds" th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'seconds'}">Seconds</option>
                                            <option value="minutes" th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'minutes'}">Minutes</option>
                                            <option value="hours" th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'hours'}">Hours</option>
                                            <option value="days" th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'days'}">Days</option>
                                            <option value="weeks" th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'weeks'}">Weeks</option>
                                            <option value="months" th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'months'}">Months</option>
                                            <option value="years" th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'years'}">Years</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                </div>

            </div>

            <div align="center">

                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="confirm"/>
                <input class="btn btn-primary btn-lg"
                       name="confirm"
                       accesskey="l"
                       th:value="#{screen.consent.confirm}"
                       type="submit"/>
                &nbsp;
                <a class="btn btn-success btn-lg" id="cancel" name="cancel"
                   th:href="@{/login}" th:text="#{screen.consent.cancel}"/>

            </div>

        </div>
    </form>
</div>
</body>
</html>
